<?php

	//获取区域数据
	function getArea(){
        $pid = $this->request->post('pid', 0);
        $list = SysAreaModel::all(['pid'=>$pid]);
        $this->success('ok', '', $list);
    }

?>

<html>

<select name="province"></select>
<select name="city"></select>
<select name="area"></select>

</html>

<script language="JavaScript">

    (function(){
        "use strict";
        var s, c, d = document;
        function p(conf) {
            c = conf;
            s = this;
            s.init();
        }
        p.pt = p.prototype;
        p.pt.init = function(){
            d.addEventListener('DOMContentLoaded', function(){
                if(parseInt(c.province.def)){
                    if(parseInt(c.province.def)){
                        s.ajax(function(ret){
                            s.generateOption(c.province.dom, ret, c.province.def);
                        });
                    }
                    if(parseInt(c.city.def)){
                        c.ajax.data = {pid: c.province.def};
                        s.ajax(function(ret){
                            s.generateOption(c.city.dom, ret, c.city.def);
                        });
                    }
                    if(parseInt(c.area.def)){
                        c.ajax.data = {pid: c.city.def};
                        s.ajax(function(ret){
                            s.generateOption(c.area.dom, ret, c.area.def);
                        });
                    }
                }else{
                    s.ajax(function(ret){
                        s.generateOption(c.province.dom, ret);
                    });
                }
                c.province.dom.onchange = function(){
                    c.ajax.data = {pid: this.value};
                    s.ajax(function(ret){
                        s.generateOption(c.city.dom, ret);
                    });
                };
                c.city.dom.onchange = function(){
                    c.ajax.data = {pid: this.value};
                    s.ajax(function(ret){
                        s.generateOption(c.area.dom, ret);
                    });
                }
            });
        };
        p.pt.generateOption = function(dom, data, def) {
            dom.options.length = 0;
            dom.options.add(new Option('请选择', ''));
            for(let i = 0; i < data.length; i ++){
                let isDef = parseInt(data[i].id) === parseInt(def);
                dom.options.add(new Option(data[i].name, data[i].id, isDef, isDef));
            }
        };
        p.pt.ajax = function(cb){
            let data = new FormData();
            let xhr = new XMLHttpRequest();
            for(let i in c.ajax.data){
                data.append(i, c.ajax.data[i]);
            }
            xhr.timeout = c.ajax.timeout ? c.ajax.timeout : 3000;
            xhr.responseType = c.ajax.responseType ? c.ajax.responseType : 'json';
            xhr.open(c.ajax.method ? c.ajax.method : 'POST', c.ajax.url);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.onload = function(e){
                if(this.status === 200 || this.status === 304){
                    let ret = c.ajax.onload ? c.ajax.onload(this.response) : this.response;
                    cb(ret);
                }
            };
            xhr.ontimeout = function(e){
                c.ajax.ontimeout && c.ajax.ontimeout(e);
            };
            xhr.onerror = function(e){
                c.ajax.onerror && c.ajax.onerror(e);
            };
            xhr.send(data);
        };
        window.pca = function(conf){
            return new p(conf);
        };
    })(window);

    //使用方式
    pca({
        ajax: {
            'url': '{:url("Serviceobjectmanager/getarea")}'
            ,onload: function(ret){
                return ret.data;
            }
            ,ontimeout: function(){
                alert('超时了')
            }
            ,onerror: function(ret){
                alert('报错了' + ret.message)
            }
        }
        ,province: {dom: document.querySelector('[name=province]'), def: 510000}
        ,city: {dom: document.querySelector('[name=city]'), def: 510700}
        ,area: {dom: document.querySelector('[name=area]'), def: 510722}
    });

</script>